<template>
  <div>
    <button :class="[`button-${type}`]">
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    type: {
      type: String
    }

  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
button {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  margin: 10px;
  color: #606266;
}
button:hover {
  background-color: #ecf5ff;
  // color: #409eff;
}
.button-primary {
  background-color: #409eff;
  color: #fff;
}
.button-primary:hover {
  background-color: #66b1ff;
}
.button-success {
  background-color: #67c23a;
  color: #fff;
}
.button-success:hover {
  background-color: #85ce61;
}
.button-info {
  background-color: #909399;
  color: #fff;
}
.button-info:hover {
  background-color: #a6a9ad;
}
.button-warning {
  background-color: #e6a23c;
  color: #fff;
}
.button-warning:hover {
  background-color: #ebb563;
}
.button-danger {
  background-color: #f56c6c;
  color: #fff;
}

.button-danger:hover {
  background-color: #f78989;
}

// .button-disabled {
//   cursor: not-allowed;
// }
</style>
